<template>
  <div class="otherHome">
    <Other-Header bgColor="#5741d9"></Other-Header>
    <div class="announceSection">
      <!-- 搜索-->
      <div class="searchbox">
        <el-input v-model="inputSearch" :placeholder="$t('l.other_a_1')"></el-input>
        <button class="searchBtn" @click="onSearch">{{$t('l.other_a_2')}}</button>
      </div>
      <!-- 切换内容 -->
      <div class="announceMain">
        <div class="announcSwitch">
          <el-radio-group v-model="type" @change="onChange">
            <el-radio-button label="0">{{$t('l.other_a_0')}}</el-radio-button>
            <el-radio-button label="1">{{$t('l.other_a_4')}}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="announceCon">
          <router-link to="/workManage" class="linkTo">{{$t('l.other_a_5')}}</router-link>
          <!-- 公告中心 -->
          <div class="announceList" v-if="!helpCenterVisibled">
            <div class="fl-col" v-for="(announce,index) in announcementCenterList" :key="index">
              <h5 class="announceTitle">{{articleTypeMap[announce.category].typeName}}</h5>
              <ul class="announceListInfo">
                <li
                  v-for="(item, index) in announce.items"
                  :key="index"
                  v-show="index<announcementCenterShowNum"
                  @click="linkDetailPage(item.id)"
                >{{item.title}}</li>
              </ul>
              <span
                class="showMore"
                v-show="announce.items.length>announcementCenterShowNum"
                @click="showMoreList(type, articleTypeMap[announce.category].typeCode)"
              >{{$t('l.other_a_3', [announce.total])}}</span>
            </div>
          </div>
          <!-- 常见问题 -->
          <div class="announceList" v-if="helpCenterVisibled">
            <div class="fl-col" v-for="(announce,index) in helpCenterList" :key="index">
              <h5 class="announceTitle">{{articleTypeMap[announce.category].typeName}}</h5>
              <ul class="announceListInfo">
                <li
                  v-for="(item, index) in announce.items"
                  :key="index"
                  v-show="index<helpCenterShowNum"
                  @click="linkDetailPage(item.id)"
                >{{item.title}}</li>
              </ul>
              <span
                class="showMore"
                v-show="announce.items.length>helpCenterShowNum"
                @click="showMoreList(type, articleTypeMap[announce.category].typeCode)"
              >{{$t('l.other_a_3', [announce.total])}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";

export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      inputSearch: "",
      type: 0,
      helpCenterVisibled: false,
      announcementCenterList: [],
      helpCenterList: []
    };
  },
  computed: {
    helpCenterShowNum() {
      return this.helpCenterList.length > 2 ? 5 : 8;
    },
    announcementCenterShowNum() {
      return this.announcementCenterList.length > 2 ? 5 : 8;
    }
  },
  async created() {
    this.type = this.$route.query.type || 0;
    this.helpCenterVisibled = this.type == 1;

    this.articleTypeMap = await this.getAllArticleType();

    this.announcementCenterList = await this.initArticleList(
      "announcementCenter"
    );
    this.helpCenterList = await this.initArticleList("helpCenter");
  },
  methods: {
    // 初始化列表
    async initArticleList(group) {
      let obj = {};
      let arr = await this.getArticleTypeList(group);

      for (let item of arr) {
        await this.getAnnouncementList(item.typeCode, (list, total) => {
          obj[item.id] = {
            items: list,
            total: total
          };
        });
      }

      return Object.keys(obj).map(key => ({
        category: key,
        ...obj[key]
      }));
    },
    // 搜索
    onSearch() {
      if(!this.inputSearch) return;

      this.$router.push({
        path: "/searchResult",
        query: {
          key: this.inputSearch,
          // lang: 'zh_CN',
          // pageNum: 1,
          // pageSize: 15,
          type: this.type
        }
      });
    },
    // 切换页签
    onChange(value) {
      this.helpCenterVisibled = value == 1;
    },
    // 跳转查看更多列表页
    showMoreList(type, typeCode) {
      this.$router.push({
        path: "/announceList",
        query: {
          type,
          typeCode
        }
      });
    },
    // 跳转到详情页
    linkDetailPage(articleId) {
      this.$router.push({
        path: "/articleDetails",
        query: {
          articleId
        }
      });
    },
    // 获取公告和问题列表
    async getAnnouncementList(typeCode, callback) {
      let params = {
        lang: this.$i18n.locale,
        pageNum: 1,
        pageSize: 15,
        typeCode: typeCode
      };
      let res = await api.announcementList(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        callback.call(this, Object.assign([], data.records), data.total);
      } else {
        this.$layer.msg(msg);
      }
    },
    // 获取所有资讯类别
    async getAllArticleType() {
      let typeMap = {};
      let res = await api.allArticleType({
        lang: this.$i18n.locale
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        data.forEach(element => {
          typeMap[element.id] = {
            typeCode: element.typeCode,
            typeName: element.typeName
          };
        });

        return typeMap;
      } else {
        return null;
      }
    },
    // 获取资讯类别的子类
    async getArticleTypeList(typeCode) {
      let res = await api.articleTypeList({
        lang: this.$i18n.locale,
        typeCode: typeCode
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        return data.map(item => ({
          id: item.id,
          typeCode: item.typeCode,
          typeName: item.typeName
        }));
      } else {
        return [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.otherHome {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
}
.announceSection {
  width: 1200px;
  min-height: 990px;
  box-sizing: border-box;
  margin: 20px auto 0;
  padding-bottom: 160px;
  /* 搜索 */
  .searchbox {
    height: 90px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(240, 242, 253, 0.6) 100%
    );
    text-align: center;
    padding: 27px 0 23px;
    box-sizing: border-box;
    font-size: 0;
    /* 重写输入框组件样式 */
    .el-input {
      width: 468px;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(233, 238, 244, 1);
    }
    .el-input__inner {
      font-size: 14px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 1);
      line-height: 20px;
      border: 1px solid rgba(233, 238, 244, 1);
    }
    /* 搜索按钮 */
    .searchBtn {
      width: 88px;
      height: 40px;
      border-radius: 4px;
      background: #fff;
      border: 1px solid rgba(233, 238, 244, 1);
      font-size: 14px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 1);
      line-height: 20px;
      margin-left: 20px;
    }
  }

  .announceMain {
    text-align: center;
    background: #fff;
    overflow: hidden;
    min-height: 740px;
    padding-bottom: 54px;
  }
  .announcSwitch {
    margin: 50px 0 30px;
    /* 内容 */
    /deep/.el-radio-button__inner {
      width: 416px;
      height: 40px;
      font-size: 14px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 1);
    }
    /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
      color: #fff;
      background: #2D8DFE;
      border-color: #2D8DFE;
      -webkit-box-shadow: -1px 0 0 0 #2D8DFE;
      box-shadow: -1px 0 0 0 #2D8DFE;
    }
  }
  .announceCon {
    position: relative;
    .linkTo {
      position: absolute;
      right: 80px;
      top: 18px;
      font-size: 16px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: #2D8DFE;
      line-height: 22px;
      z-index: 9;
    }
  }
  .announceList {
    font-size: 0;
    text-align: left;
    padding: 0 80px;
    overflow: hidden;
    .announceTitle {
      font-size: 18px;
      font-familyA: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(51, 56, 94, 1);
      line-height: 25px;
      padding: 16px 0;
      border-bottom: 1px solid #f0f2fd;
    }
    ul.announceListInfo {
      width: 100%;
      li {
        display: inline-block;
        font-size: 14px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 56, 94, 1);
        width: 100%;
        height: 20px;
        line-height: 20px;
        padding: 17px 0;
        border-bottom: 1px solid #f0f2fd;
        cursor: pointer;
      }
    }
    .showMore {
      display: inline-block;
      font-size: 16px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: #2D8DFE;
      line-height: 22px;
      margin-top: 16px;
      cursor: pointer;
    }
  }
}
.fl-col {
  float: left;
  width: 50%;
  padding-bottom: 50px;
  box-sizing: border-box;
  &:nth-child(odd) {
    padding-right: 80px;
  }
  &:nth-child(even) {
    padding-left: 80px;
  }
}
</style>
